<!DOCTYPE html>
<html>
<head>
    <title>Electron in Magnetic Field</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 10; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Main drawing function
        function drawDiagram() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 1.5;

            // 1. Draw the region of uniform magnetic field
            ctx.fillStyle = '#E0E0E0';
            ctx.fillRect(350, 50, 350, 350);
            ctx.fillStyle = 'black';

            // 2. Draw magnetic field lines
            const fieldY = [125, 225, 325];
            fieldY.forEach(y => {
                drawArrow(350, y, 550, y);
                ctx.beginPath();
                ctx.moveTo(550, y);
                ctx.lineTo(650, y);
                ctx.stroke();
            });
            
            // 3. Define the electron's path
            const angleDeg = 30;
            const angleRad = -angleDeg * Math.PI / 180; // Negative because it's below horizontal
            const intersectionPoint = { x: 280, y: 200 };
            
            // 4. Draw the electron's velocity vector
            const startPoint = {
                x: 80,
                y: intersectionPoint.y - Math.tan(angleRad) * (80 - intersectionPoint.x)
            };
            const arrowEndPoint = {
                x: 180,
                y: intersectionPoint.y - Math.tan(angleRad) * (180 - intersectionPoint.x)
            };
            
            // Electron dot
            ctx.beginPath();
            ctx.arc(startPoint.x, startPoint.y, 5, 0, 2 * Math.PI);
            ctx.fill();
            
            // Velocity arrow
            drawArrow(startPoint.x, startPoint.y, arrowEndPoint.x, arrowEndPoint.y);
            
            // Full path line before entering field
            const entryPoint = {
                x: 350,
                y: intersectionPoint.y - Math.tan(angleRad) * (350 - intersectionPoint.x)
            };
            ctx.beginPath();
            ctx.moveTo(arrowEndPoint.x, arrowEndPoint.y);
            ctx.lineTo(entryPoint.x, entryPoint.y);
            ctx.stroke();
            
            // 5. Draw the angle indication
            ctx.save();
            ctx.setLineDash([5, 5]);
            ctx.lineWidth = 1;
            // Horizontal dashed line
            ctx.beginPath();
            ctx.moveTo(intersectionPoint.x - 100, intersectionPoint.y);
            ctx.lineTo(intersectionPoint.x, intersectionPoint.y);
            ctx.stroke();
            // Path dashed line
            const dashedPathStart = {
                 x: intersectionPoint.x - 100,
                 y: intersectionPoint.y - Math.tan(angleRad) * (-100)
            };
            ctx.beginPath();
            ctx.moveTo(intersectionPoint.x, intersectionPoint.y);
            ctx.lineTo(dashedPathStart.x, dashedPathStart.y);
            ctx.stroke();
            ctx.restore();

            // Angle arc
            ctx.beginPath();
            ctx.arc(intersectionPoint.x, intersectionPoint.y, 50, angleRad, 0);
            ctx.stroke();

            // 6. Add text labels
            ctx.font = "18px Times New Roman";
            ctx.textAlign = 'left';
            
            // Electron and speed
            ctx.fillText("electron", 40, 300);
            let xPos = 40;
            ctx.fillText("speed 3.4 × 10", xPos, 325);
            xPos += ctx.measureText("speed 3.4 × 10").width;
            ctx.save();
            ctx.font = "14px Times New Roman";
            ctx.fillText("7", xPos-2, 318);
            ctx.restore();
            xPos += 12;
            ctx.fillText("m s", xPos, 325);
            xPos += ctx.measureText("m s").width;
            ctx.save();
            ctx.font = "14px Times New Roman";
            ctx.fillText("−1", xPos-2, 318);
            ctx.restore();

            // Angle value
            ctx.fillText("30°", 245, 230);

            // Region description
            ctx.textAlign = 'center';
            ctx.fillText("region of uniform", 575, 80);
            ctx.fillText("magnetic flux", 575, 105);
            ctx.fillText("density 3.2 mT", 575, 130);
            
            // Pointer line
            ctx.beginPath();
            ctx.moveTo(540, 105);
            ctx.lineTo(470, 140);
            ctx.stroke();
            
            // Figure caption
            ctx.fillText("Fig. 8.1", 350, 430);
        }

        drawDiagram();
    </script>
</body>
</html>